<!-- 年规 - 供应链规划 - 产品 - 新增/编辑 -->
<template>
  <view>
    <view class="px-3.75 pb-25">
      <view v-for="(item, index) in formData.list" :key="index">
        <view class="py-3 text-40 c-#333 font-600">{{ item.label }}：</view>
        <view class="card-grey">
          <view v-for="(formItem, formIndex) in item.list" :key="formIndex"
            class="flex items-center py-3 u-border-bottom">
            <view class="flex-shrink-0 c-#333 mr-4">{{ formIndex + 1 }}.</view>
            <u-input v-model="formItem.content" class="flex-1" placeholder="添加产品或者产品相关说明"
              :customStyle="{ fontSize: '28rpx' }" />
            <view class="flex-shrink-0 flex items-center"
              :class="[{ 'opacity-50 pointer-events-none': formIndex == 0 }]"
              @click="onDelete(item, formIndex)">
              <u-icon name="close-circle-fill" color="#F4AF22" size="28" />
              <view class="ml-1.25 c-primary">删除</view>
            </view>
          </view>
          <view class="flex justify-center items-center py-2.5" @click="onAdd(item)">
            <u-icon name="plus-circle-fill" color="#F4AF22" size="28" />
            <view class="ml-1.25 c-primary">添加新产品</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-wrap-16 px-3.75 bg-white" @click="onSubmit">
      <view class="btn-primary">保存</view>
    </view>
  </view>
</template>
<script setup>
import { showToast } from '@/common/util/uni'
import { refreshPrePage } from '@/common/util/util'
import { postProductAdd, getChargeDetail, getProductDetail } from '@/common/http/module/plan'

import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const planStore = usePlanStore()

const formData = reactive({
  chargeUser: '',
  list: [
    {
      label: '主打产品',
      prop: 'main_product',
      type: 1,
      list: [
        { content: '' }
      ]
    },
    {
      label: '优势产品',
      prop: 'advantage_product',
      type: 2,
      list: [
        { content: '' }
      ]
    },
    {
      label: '爆款产品',
      prop: 'vogue_product',
      type: 3,
      list: [
        { content: '' }
      ]
    },
    {
      label: '利润产品',
      prop: 'profit_product',
      type: 4,
      list: [
        { content: '' }
      ]
    },
  ]
})

function loadData() {
  getProductDetail(userStore.currentSocietyId, planStore.year).then(res => {
    const data = res.data
    if (!data || data.length == 0) return
    formData.list.forEach(item => {
      item.list = data.find(product => product.type == item.type)?.product_info
    })
  })
  getChargeDetail(userStore.currentSocietyId, planStore.year).then(res => {
    const data = res.data
    formData.chargeUser = data?.supply_planning ? { 
      ...data?.supply_planning, 
      user_id: data?.supply_planning?.id 
    }: ''
  })
}

function onAdd(item) {
  item.list.push({ content: '' })
}

function onDelete(item, index) {
  item.list.splice(index, 1)
}

function onSubmit() {
  const params = {
    club_id: userStore.currentSocietyId,
    year: planStore.year,
    supply_planning_charge: formData.chargeUser?.user_id
  }
  formData.list.forEach(item => {
    params[item.prop] = item.list
  })

  postProductAdd(params).then(() => {
    showToast('保存成功')
    setTimeout(() => {
      refreshPrePage('refresh')
      uni.navigateBack()
    }, 600);
  })
}

onLoad(() => loadData())
</script>

<style lang="scss" scoped>
.card-grey {
  margin-top: 20rpx;
  align-items: center;
  padding: 0 16rpx;
  border-radius: 12rpx;
  background-color: #F6F6F6;
  font-size: 28rpx;
}
</style>
